<template>
    <div class="login-callback">
        <LoginHeader>联合登录</LoginHeader>
        <div class="container">
            <div class="unbind" v-if="isBind">
                <div class="loading"/>
            </div>
            <el-tabs v-model="activeName" v-else>
                <el-tab-pane name="first" style="flex: 1">
                    <span slot="label"><i class="iconfont icon-bind"/> 已有小兔鲜账号，请绑定手机</span>
                    <CallbackBind :unionId="unionId"/>
                </el-tab-pane>
                <el-tab-pane name="second" style="flex: 1">
                    <span slot="label"><i class="iconfont icon-edit"/> 没有小兔鲜账号，请完善资料</span>
                    <CallbackPatch :unionId="unionId"/>
                </el-tab-pane>
            </el-tabs>
        </div>
        <LoginFooter/>
    </div>
</template>

<script>
    import LoginHeader from "@/views/login/components/login-header";
    import CallbackBind from "@/views/login/components/callback-bind";
    import CallbackPatch from "@/views/login/components/callback-patch";
    import LoginFooter from "@/views/login/components/login-footer";
    import QC from 'qc'
    import {userQQLogin} from "@/api/user";

    export default {
        name: "LoginCallback",
        components: {LoginFooter, CallbackPatch, CallbackBind, LoginHeader},
        data() {
            return {
                activeName: 'first',
                isBind: true,
                unionId: ''
            }
        },
        created() {
            this.userQQLogin()
        },
        methods: {
            userQQLogin() {
                if (!QC.Login.check()) {
                    this.isBind = false
                    return;
                }
                QC.Login.getMe((openId) => {
                    this.unionId = openId
                    userQQLogin(openId).then(data => {
                        this.$store.commit('user/setUser', data.result)
                        this.$router.push(this.$store.state.user.redirectUrl)
                    }).catch(e => {
                        this.isBind = false
                    })

                })
            }
        }
    }
</script>

<style scoped lang="less">

    .container {
        width: 700px;
        display: flex;
        justify-content: center;
        margin-top: 50px;
        height: 500px;
        position: relative;

        .unbind {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            padding: 25px 0;
            z-index: 99;

            .loading {
                height: 100%;
                background: #fff url(../../assets/images/load.gif) no-repeat center / 100px 100px;
            }
        }
    }

</style>